<template>
  <alertBox data-title="审批状态" close="x" @close="onCloseApproval" v-if="isApprovalPopup">
    <div class="approval-box">
      <div class="timeline-box">
        <el-timeline>
          <el-timeline-item color='#1989FA'>
            <div class="row">
              <div>
                <div class="row">
                  <div class="user-name">{{ approvalInfo.createUserName }}</div>
                  <div class="user-occupation">{{ approvalInfo.position }}</div>
                </div>
                <div class="user-remarks">
                  备注：{{ approvalInfo.remarks || '暂无备注' }}
                </div>
              </div>
              <div class="submit-time">
                <div class="time">{{ approvalInfo.createTime }}</div>
                <!-- submit-orange -->
                <div class="submit-status">提交人</div>
              </div>
            </div>
          </el-timeline-item>
          <el-timeline-item color='#1989FA' v-for="(item, index) in approvalInfo.approveDetails" :key="index">
            <div>
              <div class="row row-active-top">
                <div>
                  <div class="align-items">
                    <div class="user-name">{{ item.userName }}</div>
                    <div class="user-occupation">{{ item.position }}</div>
                  </div>
                  <div class="user-remarks">
                    {{ item.auditContent ? '备注：' + item.auditContent : '' }}
                  </div>
                  <div
                    v-if="!item.createTime && (userId === item.userId) && (approvalInfo.flow === item.approverSeq) && !approvalInfo.isEnd">
                    <div>
                      <div class="align-items ">
                        <div>是否同意：</div>
                        <div>
                          <el-radio-group v-model="approvalRadio" class="ml-4">
                            <el-radio label="1" size="large">同意</el-radio>
                            <el-radio label="2" size="large">驳回</el-radio>
                          </el-radio-group>
                        </div>
                      </div>
                      <div class="align-items" style="align-items:flex-start;">
                        <div>审核备注：</div>
                        <div>
                          <el-input placeholder="请输入审核备注" style="width:300px" :rows="3"
                                    v-model="textArea" type="textarea"/>
                        </div>
                      </div>
                    </div>
                    <div>
                    </div>
                  </div>
                </div>
                <div class="submit-time">
                  <div class="time">{{ item.createTime || '未审核' }}</div>
                  <div
                    :class="[item.state === 1 ? 'submit-green' : item.state === 2 ? 'submit-orange' : '', 'submit - status']">
                    {{ (item.state === 1 ? '已通过' : (item.state === 2 ? '已拒绝' : '')) }}
                  </div>
                </div>
              </div>
              <div class="tips-box"
                   v-if="approvalInfo.isEnd && (approvalInfo.approveDetails.length - 1 === index)">
                <el-alert title="提示：为保护账户安全，请您去手机端审批！" :closable="false" type="error" show-icon/>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
      <div class="btn-popup-box" v-if="approvalInfo.state === 0 && userId === approvalInfo.createUserId">
        <button class="mini-btn" @click="onCancelApply">取消申请</button>
      </div>
      <div class="btn-popup-box" v-if="approvalInfo.state === 4 && !approvalInfo.isEnd">
        <div>
          <button class="btn-white mini-btn mini-btn-white" @click="onCloseApproval">取消</button>
          <button class="mini-btn mini-btn-active" @click="onDefineApproval">确认</button>
        </div>
      </div>
    </div>
  </alertBox>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import alertBox from '@/components/alert-box.vue'
import { dateFormat, confirm, downLoadFile } from '@/utils/util'
import {
  approval, getApprovalProcess
} from '@/api/pay.ts'

export default defineComponent({
  components: {
    alertBox
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    approvalId: {
      type: [Number, String],
      default: ''
    },
    userId: {
      type: [Number, String],
      default: ''
    }
  },
  data() {
    return {
      isApprovalPopup: false,
      approvalInfo: {} as any,
      approvalRadio: 0,
      textArea: ''
    }
  },
  watch: {
    show(newval) {
      this.isApprovalPopup = newval
      if (newval) {
        this.getApprovalProcess()
      }
    },
    isApprovalPopup(newval) {
      this.$emit('update:show', newval)
    }
  },
  methods: {
    // 获取审批流列表
    async getApprovalProcess() {
      const result = await getApprovalProcess({
        id: Number(this.approvalId)
      })
      this.approvalInfo = result
    },
    // 关闭审批流弹窗
    onClose() {
      this.isApprovalPopup = false
    },
    onCloseApproval() {
      this.onClose()
      this.approvalRadio = 0
    },
    // 审批
    async onApproval() {
      console.log(this.textArea, 'textAreatextArea')
      await approval({
        serveCompanyId: this.approvalInfo.serveCompanyId,
        id: Number(this.approvalId),
        params: {
          isAgree: this.approvalRadio,
          auditContent: this.textArea || (Number(this.approvalRadio) === 1 ? '同意' : Number(this.approvalRadio) === 2 ? '驳回' : '')
        }
      })
      console.log(this.approvalRadio, '点击啦')
    },
    // 取消申请
    onCancelApply() {
      confirm('', '确认取消审批吗').then(async () => {
        await this.onApproval()
        this.textArea = ''
        this.$message.success('取消审批成功')
        this.$emit('doSearch')
        this.isApprovalPopup = false
      })
    },
    async onDefineApproval() {
      if (!this.approvalRadio) {
        this.$message.error('请至少选择一个')
        return
      }
      if (Number(this.approvalRadio) === 2 && !this.textArea) {
        this.$message.error('请输入驳回原因')
      }
      await this.onApproval()
      this.textArea = ''
      this.$emit('doSearch')
      this.isApprovalPopup = false
      if (Number(this.approvalRadio) === 1) {
        this.$message.success('审批成功')
      } else {
        this.$message.success('驳回成功')
      }
    }
  }
})
</script>

<style scoped lang="stylus">
.approval-box
  padding 60px
  height 500px
.timeline-box
  padding-bottom 60px
.user-name
  font-size 16px
  font-weight 500
  margin-right 8px
.user-occupation
  font-size 14px
  color #9497B1
.user-remarks
  font-size 14px
  color #9497B1
  margin-top 8px
.submit-time
  text-align right
  color #9497B1
  font-size 14px
  .submit-orange
    color #FF7E68
  .submit-green
    color #00D679
  .submit-status{
    font-size 16px
  }
.row-active-top
  align-items flex-start
  min-height 80px
.tips-box
  margin-top 8px
  width 100%
.btn-popup-box
  display flex
  align-items center
  justify-content center
  position fixed
  bottom 0
  margin 185px auto
  width 800px
</style>
